<template>
  <div class="invite-container">
    <NotDataErrorException v-if="exceptionInfo.subTitle" v-bind="exceptionInfo"/>
    <Row v-else :gutter="[24, 24]">
      <Col :span="9">
        <div class="invite-left">
          <div class="invite-left-header">
            <img :src="tenantConfig?.logo" />
            <div class="ml-2 truncate font-medium md:opacity-100" >
              {{ tenantConfig?.name }}
            </div>
          </div>
          <div class="invite-left-desc flex xl:flex xl:flex-col">
            <div class="mt-2 font-normal text-md dark:text-gray-600" 
                style="white-space: pre-wrap;" 
                v-html="tenantConfig?.siteDescTitle" 
            />
          </div>
        </div>
      </Col>
      <Col :span="15">
        <div class="invite-right">
          <div class="invite-right-title">
            欢迎加入「{{ inviteInfo.tenantName }}」
          </div>
          <div class="teamix-title">
            来自用户 {{ inviteInfo.invitorName }} 的邀请
          </div>
          
          <a-form layout="vertical" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="姓名">
              <a-input v-model:value="modelRef.name" disabled/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button type="primary" style="width: 100%" v-if="inviteInfo.isJoin" @click="handleSubmit">进入企业</a-button>
              <a-button type="primary" style="width: 100%" v-else @click="handleSubmit">加入企业</a-button>
            </a-form-item>
          </a-form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" name="invite-user" setup>
import { ref, onMounted, reactive } from 'vue';
import { AppLogo } from '/@/components/Application';
import { getPlatformConfig } from '/@/utils/cache/module';
import { useMessage } from '/@/hooks/web/useMessage';
import { Row, Col } from 'ant-design-vue'
import { useUserStore } from '/@/store/modules/user';
import {  selectLoginTenant } from '/@/api/sys/user';
import { getUserInviteBySign, userJoinTenant } from './user.api';
import { useRoute } from 'vue-router';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermissionStoreWithOut } from '/@/store/modules/permission';
import NotDataErrorException from '/@/views/sys/exception/NotDataErrorException.vue'

const permissionStore = usePermissionStoreWithOut();
const { t } = useI18n()
const route = useRoute();
const exceptionInfo = ref<any>({
  title: '邀请链接异常',
  subTitle: undefined,
  full: true,
  showBtn: false
})
const tenantConfig = ref<any>()
const { createMessage, createConfirm } = useMessage();
const userStore = useUserStore()
const labelCol = { span: 4 };
const wrapperCol = { span: 24 };
const inviteInfo = ref<any>({})
const modelRef = reactive({
  name: ''
});
onMounted(async () => {

  modelRef.name = userStore.getUserInfo.userName
  tenantConfig.value = getPlatformConfig()
  getUserInviteBySign({ sign: route.query.sign }).then(resp => {
    if (!resp.success) {
      exceptionInfo.value.subTitle = resp.message
      return
    }
    inviteInfo.value = resp.data
  }).catch(resp => {
    exceptionInfo.value.subTitle = resp.message
  })
  console.log("platformConfig: ", tenantConfig.value);
})


/**
 * 确认选中的租户信息
 */
const handleSubmit = async () => {
  try {
    //
    createMessage.loading({
      content: t('sys.app.menuLoading'),
      key: 'menu_loading'
    });
    if (!inviteInfo.value.isJoin) {
      // 调用加入接口
      const resp = await userJoinTenant({ sign: inviteInfo.value.sign })
      if (!resp.success) {
        exceptionInfo.value.subTitle = resp.message
        return
      }
    }
    const tenantId = inviteInfo.value.tenantId
    // 调用选中登录的接口
    await selectLoginTenant({
      tenantId, 
      loginId: userStore.getAuthInfo.loginId
    })
    await userStore.switchTenant(tenantId as string, true)
    permissionStore.setDynamicAddedRoute(false);
    userStore.afterLoginAction(true, { tenantId })
  } catch(e) {
    console.error('error', e);
  } finally {
    createMessage.destroy('menu_loading')
  }
}
     


</script>

<style lang="less">
.invite-container {
  width: 100vw;
  min-width: 1200px;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}
.invite-left {
  min-width: 500px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(100vh);
  padding: 200px 106px;
  background-image: url(/@/assets/images/invite-left.png);
  &-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    font-size: 25px;
    // font-weight: bold;
    font-family: Arial, Microsoft YaHei, sans-serif;
    transition: all 0.5s;
    img {
      width: 54px;
      height: 54px;
    }
  }

  &-desc {
    margin-top: 18px;
    margin-bottom: 184px;
    font-size: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: grid;
    color: @text-color-base;
  }
}

.invite-right {
  width: 528px;
  margin-top: 188px;
  margin-left: auto;
  margin-right: auto;
  &-title {
    color: var(--text-title,#292929);
    font-size: 24px;
    font-weight: 500
  }

  .teamix-title {
    color: @text-desc-color;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.ant-form-item-label label {
  color: @text-desc-color !important;
}
</style>
